<template>

  <div class="detail">
       <div class="title">
     <div class="detail-icon">
      <van-image
        round
     width="1.5rem"
     height="1.5rem"
     :src="icon"
    />
    <span class="nickname">{{ nickname }}</span>
     </div>
    <UserCtrl :id="id"/>
  </div>

    <p class="cont" @click="$router.push({name: 'detail',query:{id:id}})">{{ content }}</p>
      <div class="pic-list">
   <div class="pic"
   >
    <van-image

         class="pic-img"
        v-for="i in pics"
         :src="i.img"
    />
  </div>
   </div>
    <div class="my-tag">
      <div v-for="item in tag_list" class="my-tag-item" 
      @click="$router.push({path:'/micircle',query:{id:item.id}})"
      >
        <van-image
      v-if="item.img"
     width="1rem"
     height="1rem"
     :src="item.img"
    />
    <span class="my-tag-name">{{ item.tag }}</span>
      </div>
    </div>
    <div class="hot-comment" v-if="hot_comment">
      <div class="comment"><span class="name">{{ hot_comment.name }}:</span>
      <span >{{ hot_comment.comment }}</span>
    </div>
       <div class="belong-place">{{ hot_comment.belong_place }}</div>
     </div>
     <CardCtrl :praise_num="praise_num" :answer_num="comment_num" :id="id" :my_up="props"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import CardCtrl from '../../../../components/CardCtrl.vue'
import { onMounted } from 'vue';
const props = defineProps<{
  id:number,
  nickname:string,
  icon: string,
  content_type:number,
  content: string,
  praise_num?:string,
  comment_num?: string,
  hot_comment?: ({
    name:string,
    comment:string,
    belong_place:string,
  }|null)
  pic_list?: Array<{
    img:string
  }>
  tag_list?: Array<{
  id: number,
  tag: string,
  tag_type:number,
  tag_id: string,
  img: string,
  }>,
}>()
let pics = ref<Array<{img:string}>>([])
onMounted(() => {
  pics.value = props.pic_list.slice(0, 3);
 
})

</script>

<style scoped lang="scss">
.detail {
  padding:10px;
  background-color: #fff;
}
.title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .detail-icon {
  display: flex;
  align-items: center;
  .nickname {
  font-size: 12.5px;
  margin-left: 5px;
}
}

}
.cont {
  margin: .6rem 0rem;
  font-size: .95rem;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.my-tag {
  width: 100%;
  margin-bottom: .3rem;
  display: flex;
  flex-wrap: wrap;
  .my-tag-item {
  display: flex;
  align-items: center;
  padding: .3rem 0rem;
  background-color: #f6f6f6;
  margin-right: 1.25rem;
  border-radius: .3rem;
  .my-tag-name {
  padding: 0rem .3rem;
  font-size: .8rem;
  color:#757575;
}
}
}


.hot-comment {
  margin: .625rem 0rem;
  padding: .625rem;
  background-color: #f6f6f6;
  border-radius: .35rem;
  .comment {
  font-size: .85rem;
  .name {
  width: 3.75rem;
  color:#757575;
  padding-right: .3rem;
}
}

}

.belong-place {
  font-size: .8rem;
  color:#757575;
}
.pic-list {
  margin-bottom: .625rem;
  // border-radius: 6px;
  overflow: hidden;
  .pic {
  border-radius: 5rem;
  display: flex;
  :deep(.van-image__img) {
    border-radius: .5rem;
  }
}
}
 .pic-img {
   width: 30vw;
   height: 17vh;
   margin-left: .3rem;
  
}
.pic .cont {
  width: 10.8rem;
  height: 7rem;
  // min-height: 10.8rem;
}
</style>